<template >
    <!--lang="pug"-->
    <!--div(class="vue-container") vue loader demo1-->
        <!--br-->
        <!--a(href="https://www.baidu.com") Baidu1-->
        <!--a(href="https://www.baidu.com") Baidu2-->
        <!--a(href="https://www.baidu.com") Baidu3-->
    <div>
        <!--<div v-for="(item, index) in myData.list">-->
            <!--<span>{{item.name}}</span>-->
            <!--<span>{{item.sex}}</span>-->
            <!--<span>{{item.age}}</span>-->
        <!--</div>-->
        <!--<child :sync-test.sync="tmp">-->
            <!--<template slot="test" slot-scope="test">-->
                <!--<span>{{test.text}}</span>-->
            <!--</template>-->
        <!--</child>-->
        <table>
            <keep-alive>
                <component :is="componentName"></component>
            </keep-alive>
            <button @click="toggleComponent">切换组件</button>
        </table>
    </div>
</template>

<script type="text/ecmascript-6">
    // import Child from './child';
    import SyncComponent1 from './syncComponent1';
    import SyncComponent2 from './syncComponent2';

    export default {
        name: "hello-vue",
        data() {
            return {
                myData: null,
                tmp: 'this is test',
                componentName: 'SyncComponent1'
            }
        },
        components: {
            // Child,
            SyncComponent1,
            SyncComponent2
        },
        created() {
            // this.fetchData()

        },
        methods: {
            async fetchData() {
                const result = await fetch('http://localhost:8888')
                const data = await result.json()
                this.myData = data
                console.log(data)
            },
            toggleComponent() {
                const componentName = this.componentName === 'SyncComponent1' ? 'SyncComponent2' : 'SyncComponent1'
                this.componentName = componentName
            }
        },
        watch: {
            tmp(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .vue-container
        position relative
        font-size 30px
        background linear-gradient(0deg, #000 20%, #f00 50%, #090 80%)
        column-count 3
        a
            display block
            animation my-animation 3s infinite
            transform-origin center
            width calc(100% - 200px)
            &:nth-child(1)
                animation-delay 0s
            &:nth-child(2)
                animation-delay 1s
            &:nth-child(3)
                animation-delay 2s
    @keyframes my-animation {
        0% {transform: rotateZ(0deg)}
        20% {transform: rotateZ(60deg)}
        50% {transform: rotateZ(30deg)}
        100% {transform: rotateZ(360deg)}
    }

</style>
